<!doctype html>
<html>
	<!DOCTYPE html>
	<html lang="zh">
		<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
			<meta http-equiv="X-UA-Compatible" content="ie=edge">
			<title>添豆员工查询</title>
			<style type="text/css">
				* {
					padding: 0;
					margin: 0;
				}

				html,
				body {
					width: 100%;
					height: 100%;
				}

				.page {
					width: 100%;
					height: 100%;
					background: url("__STATIC__/image/webRegister/bg12.png");
					background-size: 100% 100%;

				}

				.page2 {
					width: 100%;
					height: 100%;
				}

				.shadow {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					z-index: 2;
					display: none;
					background: rgba(0, 0, 0, .5);
				}

				#loader4 {
					z-index: 99999;
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
					width: 50px;
					height: 50px;
					display: none;
					animation: loader-4 1s ease-in-out alternate infinite;
				}


				.heart:before {
					position: absolute;
					left: 11px;
					content: "";
					width: 50px;
					height: 80px;
					transform: rotate(45deg);
					/*    background-color: rgb(230, 6, 6);*/
					border-radius: 50px 50px 0 0;
				}

				.heart:after {
					position: absolute;
					right: 11px;
					content: "";
					width: 50px;
					height: 80px;
					/*    background-color: rgb(230, 6, 6);*/
					transform: rotate(-45deg);
					border-radius: 50px 50px 0 0;
				}

				@keyframes loader-4 {
					0% {
						transform: scale(0.2);
						opacity: 0.5;
					}

					100% {
						transform: scale(1);
						opacity: 1;
					}
				}

				.shadow {
					position: absolute;
					top: 0;
					width: 100%;
					height: 100%;
					background: black;
					opacity: .3;
				}

				.loginbox {
					width: 80%;
					position: fixed;
					top: 40%;
					padding: 10px;
					background: white;
					margin-left: 10%;
					border-radius: 12px;
				}

				input {
					background: none;
					outline: none;
					border: none;
				}

				input:focus {
					border: none;
				}

				.btn {
					width: 30%;
					position: fixed;
					top: 60%;
					left: 35%;
					padding: 10px;
					border-radius: 20px;
					text-align: center;
					background: rgba(23, 150, 110, 1);
					color: white;

				}

				.resultbox {
					width: 90%;
					margin: 5%;
					height: 70%;
					background: url("__STATIC__/image/webRegister/bg11.png");
					background-size: 100% 100%;
					overflow: hidden;

				}

				.resultboxImg {
					width: 36%;
					height: 120px;
					margin-top: 130px;
					margin-left: 33%;
					margin-bottom: 10px;
					border-radius: 6px;
				}

				.name {
					text-align: center;
					font-weight: bold;
				}

				.lable {
					text-align: center;
					margin-top: 25px;
				}

				.nav {
					font-weight: bold;
					margin-left: 20px;
				}

				.back {
					width: 30%;
					position: fixed;
					top: 80%;
					left: 35%;
					padding: 10px;
					border-radius: 20px;
					text-align: center;
					background: rgba(23, 150, 110, 1);
					color: white;
				}
			</style>
		</head>
		<body>
			<!-- loading部分 -->
			<div class="shadow" id="shad">
			</div>
			<img id="loader4" class="heart" src=' {url("__STATIC__/image/webRegister/tiandou1.png")}' alt="" />

			<div class="page" id="page">
				<input class="loginbox" placeholder="请输入员工工号或姓名" type="text" id="username" />

				<div class="btn" id="btn">立即搜索</div>
			</div>

			<div class="page2" id="page2">
				<div class="resultbox">
					<img src=' {url("__STATIC__/image/webRegister/bg11.png")}' class="resultboxImg" id="photo">
					<div class="name" id="name">销售部-张思</div>
					<div class="lable">工号: <span class="nav" id="jobNumber"></span> </div>
					<div class="lable">职务: <span class="nav" id="position"></span> </div>
					<div class="lable">状态: <span class="nav" id="statusText"></span> </div>
				</div>

				<div class="back" id="back">返回搜索</div>
			</div>

		</body>
	</html>
	<script src="__STATIC__/js/webRegister/jquery.js">
	</script>
	<script type="text/javascript">
		var page = document.getElementById('page');
		var page2 = document.getElementById('page2');
		page2.style.display = "none";
		var shad = document.getElementById('shad');
		var loader = document.getElementById('loader4');
		var oBtn = document.getElementById('btn');
		var oBack = document.getElementById('back');
		oBtn.addEventListener("click", function() {
			var username = document.getElementById('username').value;
			if (!username) {
				alert("请输入员工工号或姓名");
				return;
			}
			shad.style.display = "block";
			loader.style.display = "block";
			var data = {};
			data['name'] = username;
			post("index/Index/getStaff", data, function(res) {
				shad.style.display = "none";
				loader.style.display = "none";
				if (res.code == 1) {
					document.getElementById('photo').src=res.data.photo;
					document.getElementById('name').innerHTML=res.data.name+"-"+res.data.section;
					document.getElementById('jobNumber').innerHTML=res.data.jobNumber;
					document.getElementById('statusText').innerHTML=res.data.statusText;
					document.getElementById('position').innerHTML=res.data.position;
					
		            page2.style.display = "block";
					page.style.display = "none";
					 document.getElementById('username').value="";
				} else {
					alert("结果为空")
				}
			})
		
		});
		oBack.addEventListener("click", function() {
			page.style.display = "block";
			page2.style.display = "none";
		});
		

		function post(url, obj, successCallback) {
			var urlhead = "http://dev.lktehui.com/"
			let str = 'appData=' + JSON.stringify(obj);
			var data = {
				"appData": obj,
			};
			data = JSON.stringify(data);
			$.ajax({
				type: "POST",
				url: urlhead + url,
				data: data,
				success: function(msg) {
					successCallback(msg);
				},
				error: function(err) {
					console.log(err)
				}
			});

		}
	</script>
